<template>
  <div class="content goods_detail">
    <DownloadTip v-if="!isXiangpu"></DownloadTip>
    <v-header :hasTitle="true" title="商品详情" :hasBack="true">
      <Share :url="shareUrl"></Share>
    </v-header>
    <div class="midPart" ref="midPart">
      <div :style="{height: midPartHeight}" style="width:'100%'">
      <VerticalScroll ref="verticalScroll" >
        <div>
      <div id="shade" ref="shade"></div>
      <v-carousel :swipimgage="transferUrl" :swipimgagewidth="screenWidth" :swipimgageheight="screenWidth"></v-carousel>
      <div style="width:100%;display:flex;">
        <h2 class="aui-ellipsis-2 goodsname"
            style="font-weight:bold;text-align:left;float:left;flex:1;background: white;">
          {{goodsName}}
          <span style="display:inline-block;margin-left:5px;"></span>
        </h2>
        <div style="display:flex;width:3.6rem;align-items:center;justify-content:space-between;" @click="goSource"
             v-if="traceabilityaddress">
          <i class="icon njfont nj-suyuan"></i>
          <p style="padding: 0 .75rem 0 0;">溯源</p>
        </div>
      </div>
      <p class="goodssubname" v-if="secTitle" style="text-align:left;font-size:.75rem;">
        {{secTitle}}
      </p>
      <p class="price">
        <span class="prices_text" style="text-align:left;display:inline-block;min-width:3.2rem;" v-if="goodsType == 6">
          ¥<em class="wsprice">{{perPrice}}</em>
          <del class="normalprice" v-if="normalDisplay"
               style="display:inline-block;background:#EFEFEE;color:#9A9A9A;font-size:.75rem;height:1rem;">
            ￥{{normalprice}}
          </del>
        </span>
        <span v-if="goodsType == 6">/500g</span>
        <span class="prices_text" style="text-align:left;display:inline-block;min-width:3.2rem;" v-if="goodsType != 6">
          ¥<em class="wsprice">{{wsprice}}</em>
          <del class="normalprice" v-if="normalDisplay"
               style="display:inline-block;background:#EFEFEE;color:#9A9A9A;font-size:.75rem;height:1rem;">￥{{normalprice}}</del>
        </span>
        <span v-if="goodsType != 6 && goodsType != 7">/{{minsaleqty}}{{goodsunit}}</span>
        <span v-if="goodsType == 7">/{{minsaleqty}}g</span>
        <span style="float:right;line-height:2.3rem;height:1.5rem;">库存: {{stockCount}} {{goodsunit}}</span>
      </p>
      <p v-if="estimate" style="min-width: 1rem;text-align:left;color:#0C0D0C;font-size: .6rem;padding:0 .75rem;">
        <span style="display:inline-block;background: #EEF8E7;">
          <span style="color:#4B403E;" v-if="goodsType == 6">
            每{{goodsunit}}{{wsprice}}元
          </span>
          {{estimate}}
        </span>
        <i class="icon njfont nj-tishi" style="font-size: .7rem;" @click="showInterpret"></i>
      </p>
      <ThreeKnights :prodarea='prodarea' :storageConditions='storageConditions' :brandname='brandname'></ThreeKnights>
      <Coupons v-if="CouponsList && CouponsList.length > 0" :coupons="CouponsList" @click.native="showCoupon"></Coupons>
      <ActivitiesBar
        v-if="activitiesBar.RegularList && activitiesBar.RegularList.length || activitiesBar.fixedPackageList && activitiesBar.fixedPackageList.length ||  activitiesBar.promotionalList && activitiesBar.promotionalList.length"
        :activitiesBar="activitiesBar" @click.native='showPromotions'></ActivitiesBar>
      <div class="grayBar" v-if="deliveryTime"></div>
      <ArrivingTime v-if="deliveryTime" :deliveryTime='deliveryTime' :startBookTm='startBookTm' :endBookTm='endBookTm'
                    :distributionprocessingtime='distributionprocessingtime'></ArrivingTime>
      <div class="grayBar"></div>
      <div class="image_text">
        <h4 style="text-align:center;padding:0;height:1.8rem;width: 95%;margin-left:2.5%;">
          <p
            style="color:#4B4B4B;height:100%;padding:0;width:3.8rem;margin:0 auto;line-height:1.6rem;border-bottom:3px solid #52BD13;font-size:.8rem;">
            商品详情
          </p>
        </h4>
        <div v-for="(item,index) in imgurl" class="image_text_con" :key="index">
          <img v-bind:src="item || 'static/image/demo2.png'"/>
        </div>
      </div>
      <guessYouLike v-if="goodsClassId" :goodsCode="goodsCode" :goodsClassId="goodsClassId" :classCode="classCode"></guessYouLike>
      </div>
      </VerticalScroll>
      </div>
    </div>
    <div style="width:100%;height:3rem;position: relative;bottom: 0" v-show="!barCode">
      <div class="purchased" v-show="!barCode" style="padding: 0;position: relative;width:100%;height:3rem;z-index: 1">
        <div class="shopping_cart">
          <v-CartShowNum></v-CartShowNum>

        </div>
        <div class="server_icon" style=" float:none;position: absolute;top:0.6rem;left: 3rem;">
          <div class="icon_line" style="margin:0.2rem 0 0 0"></div>
          <collect-btn :goodsId="JSON.stringify(mGoodsId)"></collect-btn>
        </div>
      </div>
      <div v-if="lastStockCountNum > 0 && commodityInfor"
           class="aui-btn aui-btn-danger aui-btn-sm add_to_cart"
           style="width: 6rem;height: 100%;bottom: 0;position:absolute;z-index: 1;right: 0;line-height: 3rem;font-size: 0.7rem;width:6rem;border-radius: 0"
           @click="showCartModle">
        加入购物车
      </div>
      <div v-if="lastStockCountNum <= 0"
           class="aui-btn aui-btn-danger aui-btn-sm add_to_cart"
           style="width: 6rem;height: 100%;bottom: 0;position:absolute;z-index: 1;right: 0;line-height: 3rem;font-size: 0.7rem;width:6rem;border-radius: 0">
        已售罄
      </div>
    </div>
    <div class="edit_data" id="countBtnBox" style="display: none; width: auto">
      <span style="position: absolute;lef:0;top:50%;transform:translate(-100%,-50%)">购买数量：</span>
      <i class="del_cart" style="float: left"></i><input type="text" value="0" readonly/>
      <i class="add_to_cart" id="add_to_cart_btn"></i>
    </div>
    <CartMode ref="showModle" @isClossing="hideShade" :height="'6rem'" style="overflow-y:scroll;">
      <p
        style="width:80%;margin-left:10%;height:3rem;overflow-y:scroll;font-size:.8rem;color:grey;position:relative;top:.3rem;"
        class="explain">
					<span style="width: 100%;position:absolute; top:50%; transform:translate(-50% , -50%)">
						{{serviceInfoList[serviceInfoIndex] && serviceInfoList[serviceInfoIndex].itemTxt}}
					</span>
      </p>
    </CartMode>

    <cart-mode ref="cartModle" buttonText="确 定" @isClossing="updateCart" :height="'18rem'">
      <add-cart-for-proce v-if="commodityInfor" ref="addCartForProce"
                          :commodityInfor="translateDetailData(commodityInfor)"></add-cart-for-proce>
    </cart-mode>
    <cart-mode ref="promotions" buttonText="关 闭" :height="'18rem'">
      <ActivitiesBox v-if="JSON.stringify(activitiesBar) != '{}'" :activitiesBar="activitiesBar"
                     @click.native='showPromotions'></ActivitiesBox>
    </cart-mode>
    <cart-mode ref="interpret" buttonText="关 闭" :height="'10rem'" class="interpret">
      <p style="color: #353535;font-size:.75rem;padding: .6rem;">购买说明</p>
      <p style="text-align:left;padding: 0 .75rem;color: #8B8B8B;">•&nbsp;该商品为称重商品</p>
      <p style="text-align:left;padding: 0 .75rem;color: #8B8B8B;">
        •&nbsp;我们会按照商品最大规格扣款，在您收到商品后，若实际规格少于最大规格，系统自动退还差价到您的付款账户。</p>
    </cart-mode>
    <cart-modle ref="carttCompon" backgroundColor="#f4f4f4">
      <detailsCoupons @refreshData="refreshData" :couponListCanBeGet="couponListCanBeGet"></detailsCoupons>
    </cart-modle>
    <add-cart-animate></add-cart-animate>
    <!--回到顶部  -->
    <button-to-top @goTop="goTop" bottom='5rem' style="z-index:10"></button-to-top>
  </div>
</template>
<script>
  import Header from "../header";
  import AddCartForProce from '@/real-components/AddCartForProce';
  import axios from "axios";
  import Api from "../../api/cjy-api";
  import Share from "../../real-components/Share";
  import {Toast} from '../../utils/toast.js';
  import {translateDetailData, getLastStockCountNum} from '@/utils/TranslateDetailDate';
  import AddCartAnimate from '@/real-components/AddCartAnimate';
  import Carousel from "../../real-components/HomeCarousel";
  import UpdateCart from "../../real-components/UpdateCart";
  import CartShowNum from "../../real-components/CartShowNum";
  import CollectBtn from "../../real-containers/Collect/collectBtn";
  import guessYouLike from "../../edit-components/guessYouLike";
  import {mapState, mapGetters, mapMutations} from 'vuex';
  import DetailProce from '../../real-components/DetailProce';
  import CartMode from '../../real-components/CartMode';
  import ActivitiesBar from '../../real-components/ActivitiesBar';
  import ActivitiesBox from '../../real-components/ActivitiesBox';
  import CommodityRecommendList from '@/real-components/CommodityRecommendList';
  import Coupons from '@/real-components/Coupons';
  import detailsCoupons from '@/real-components/CartConpon';
  import CartModle from '@/real-components/CartMode';
  import ThreeKnights from './ThreeKnights';
  import ArrivingTime from './ArrivingTime';
  import DownloadTip from '../../real-components/DownloadTip';
  import VerticalScroll from "../../real-components/VerticalScroll";
  import ButtonToTop from "../../real-components/ButtonToTopForTest";
  import { showLoading ,hideLoading} from "../../utils/loading";

  export default {
    props: {},
    data() {
      return {
        midPartHeight:'100%',
        id: '',
        goodsId: 0,
        goodsName: "",
        goodsspec: "",
        wsprice: "",
        normalprice: "",
        prodarea: "",
        brandname: "",
        imgurl: "",
        transferUrl: [],
        number: 0,
        commodityInfor: null,
        serInfo: "",
        goodsUnit: '',
        minsaleqty: '',
        stockCount: '',                          //库存
        processlist: [],
        secTitle: '',
        goodsunit: '',
        storageConditions: '',                   //储存条件
        distributionprocessingtime: '',
        workingInfo: {
          "processingattribute": '',
          "procemoney": 0,
          "processcomments": ''
        },
        barCode: '',
        deliveryTime: "",
        activeNameList: [],
        activeStartTime: [],
        activeEndTime: [],
        startBookTm: "",
        endBookTm: "",
        goodsCode: "",
        goodsClassId: "",
        classCode: "",
        serviceInfoList: "",
        serviceInfoIndex: 0,
        normalDisplay: false,
        activitiesBar: {},
        traceabilityaddress: '',
        CouponsList: null,
        estimate: null,
        couponListCanBeGet: null,
        perPrice: null,
        goodsType: '',
        isXiangpu: false
      }
    },
    components: {
      "v-header": Header,
      "v-carousel": Carousel,
      "v-UpdateCart": UpdateCart,
      "v-CartShowNum": CartShowNum,
      "collect-btn": CollectBtn,
      AddCartAnimate,
      DetailProce,
      guessYouLike,
      CartMode,
      Share,
      ActivitiesBar,
      ActivitiesBox,
      AddCartForProce,
      CommodityRecommendList,
      Coupons,
      detailsCoupons,
      CartModle,
      ThreeKnights,
      ArrivingTime,
      DownloadTip,
      VerticalScroll,
      ButtonToTop
    },
    computed: {
      ...mapGetters({
        //cartNum: '',
        userInfo: 'xhModules/userInfo',
        sessionId: 'xhModules/sessionId',
      }),

      lastStockCountNum() {
        var detail = this.commodityInfor
        if (detail) {
          detail = translateDetailData(detail)
          return detail.lastStockCountNum
        }
        return 1
      },
      mGoodsId: {
        set: function (val) {
          this.id = val;
        },
        get: function () {
          return this.id;
        }
      },
      //获取屏幕宽度
      screenWidth() {
        if (window.environment === "production") {
          return window.innerWidth;
        } else {
          return 375;
        }
      },
      stockThreshold() {
        return this.$store.state.stockThreshold || 0;
      },
      //分享链接
      shareUrl() {
        return `${location.href}&share=1`
      }
    },
    mounted() {
      this.preparation();
      this.getDetail();                                  //获取详情信息
      this.changeStyle();
    },
    updated(){
      this.$nextTick (() => {
        var midPart = this.$refs.midPart
        if (midPart ) {
         this.midPartHeight =  midPart.offsetHeight + 'px'
        }
      })
    },
    watch: {
      async $route(){
        showLoading();
        this.resetState()                                   //重置state数据,防止部分信息更新到
        var barCode = this.$route.query.barcode;
        this.barCode = barCode || '';
        this.preparation();
        await this.getDetail();                                  //获取详情信息
        this.changeStyle();
        this.$refs.verticalScroll && this.$refs.verticalScroll.goTop();
      },
    },
    methods: {
      resetState(){
        this.goodsName= "",
        this.goodsspec= "",
        this.wsprice= "",
        this.normalprice= "",
        this.prodarea= "",
        this.brandname= "",
        this.imgurl= "",
        this.transferUrl= [],
        this.number= 0,
        this.commodityInfor= null,
        this.serInfo= "",
        this.goodsUnit= '',
        this.minsaleqty= '',
        this.stockCount= '',                          //库存
        this.processlist= [],
        this.secTitle= '',
        this.goodsunit= '',
        this.storageConditions= '',                   //储存条件
        this.distributionprocessingtime= '',
        this.workingInfo= {
          "processingattribute": '',
          "procemoney": 0,
          "processcomments": ''
        },
        this.barCode= '',
        this.deliveryTime= "",
        this.activeNameList= [],
        this.activeStartTime= [],
        this.activeEndTime= [],
        this.startBookTm= "",
        this.endBookTm= "",
        this.goodsCode= "",
        this.goodsClassId= "",
        this.classCode= "",
        this.serviceInfoList= "",
        this.serviceInfoIndex= 0,
        this.normalDisplay= false,
        this.activitiesBar= {},
        this.traceabilityaddress= '',
        this.CouponsList= null,
        this.estimate= null,
        this.couponListCanBeGet= null,
        this.perPrice= null,
        this.goodsType= '',
        this.isXiangpu= false
      },
      preparation(){
        this.goodsCode = this.$route.query.code;           //接收商品code
        var u = navigator.userAgent;
        this.isXiangpu = u.indexOf("xiangpu") > -1;         //判断是否在象谱内打开
        console.log(this.isXiangpu, "navigator")
      },
      goTop() {
       this.$refs.verticalScroll &&  this.$refs.verticalScroll.goTop()
      },
      //更新购物车
      updateCart() {
        this.$refs.addCartForProce && this.$refs.addCartForProce.updateCart()
      },
      showMode() {
        this.serviceInfoIndex = arguments[0];
        this.$refs.showModle && this.$refs.showModle.showModle();
      },
      //跳转到溯源页面
      goSource() {
        this.traceabilityaddress && this.$router.push({
          'path': "originSource",
          'query': {urlData: this.traceabilityaddress}
        });
      },
      //隐藏遮罩层
      hideShade() {
        this.$refs.shade.style.display = "none";
      },
      showCartModle() {
        this.$refs.cartModle && this.$refs.cartModle.showModle();
      },
      //优惠活动展示
      showPromotions() {
        this.$refs.promotions && this.$refs.promotions.showModle();
      },
      //显示解释说明
      showInterpret() {
        this.$refs.interpret && this.$refs.interpret.showModle();
      },
      translateDetailData,
      reload() {
        this.$router.go(0);
      },
      //更改服务内容时
      changeStockCount(data) {
        this.number = data
      },
      changeWorkInfro(data) {
        this.$refs.updateCart.changeWorkInfro(data)
      },
      //获取商品详情
      async getDetail() {
        console.log(api.goods_host,api.enterpriseCode,"goods_host");
        var goodsId = this.$route.query.code;
        var barCode = this.$route.query.barcode || '';
        this.barCode = barCode;
        this.goodsId = parseInt(goodsId);
        var key = 'goodscodeList';
        if (barCode) {
          let conpen = '';
          barCode = Number(barCode);
          let barCodeLength = JSON.stringify(barCode).length;
          if (barCodeLength < 13) {
            for (let i = 0; i < 13 - barCodeLength; i++) {
              conpen += '0';
            }
          }
          barCode = conpen + JSON.stringify(barCode);
          goodsId = barCode;
          key = 'barCode'
        } else {
          goodsId = [goodsId]
        }
        let detailsInfo = await localforage.getItem(goodsId.toString());
        detailsInfo && this.showDetailInfo(detailsInfo);
        let options = {
          method: "post",
          url: api.goods_host + "/mallGoods/queryMallGoodsList",
          data: {
            enterpriseCode: api.enterpriseCode,
            [key]: goodsId,
            pageTag: "goodsDetail",
            usePlatform: "wap",
            // storeCode: api.shopCode,
            storeCode: localStorage.getItem("storeCode")
          },
          headers: {
            sessionId: localStorage.getItem("sessionId"),
          }
        }
        axios(options).then(res => {
          let DetailData = res.data.data[0][0];
          if (DetailData) {
            this.showDetailInfo(DetailData, goodsId);
          } else {
            Toast({
              message: '该商品已经下架',
              duration: 2000,
              type: "fail"
            })
            setTimeout(() => {
              window.history.go(-1);
            }, 1000)
          }
        }).catch(res => {

        });
      },
      async showDetailInfo(data, goodsId) {
        if (goodsId) {
          let previousData = await localforage.getItem(goodsId.toString());
          localforage.setItem(goodsId.toString(), data);
          if (JSON.stringify(data) === JSON.stringify(previousData)) {
            return false;
          };
        }
        var conditions = this.$refs.conditions;
        var urlList = data.urllist;
        this.commodityInfor = data;
        this.goodsName = data.goodsname;
        this.classCode = data.classcode;
        this.goodsClassId = data.goodsclassid;
        this.goodsspec = data.goodsspec;
        this.distributionprocessingtime = data.distributionprocessingtime;
        if (data.goodstype == 7) {
          this.goodsType = 7;
          if (data.goodsunit == 'g' || data.goodsunit == 'G') {
            this.goodsunit = 'g';
            this.minsaleqty = 500;
            (data.allPromotResultMap && data.allPromotResultMap.mallProdVo) ? (this.wsprice = parseFloat(data.allPromotResultMap.mallProdVo.promPrice * 0.5).toFixed(2)) : this.wsprice = parseFloat(data.wsprice * 0.5 || 0).toFixed(2);
            this.normalprice = parseFloat(data.allPromotResultMap.mallProdVo.price * 0.5 || 0).toFixed(2);
          }
          if (data.goodsunit == 'kg' || data.goodsunit == 'KG' || data.goodsunit == 'Kg' || data.goodsunit == 'kG') {
            this.goodsunit = 'kg';
            this.minsaleqty = 500;
            (data.allPromotResultMap && data.allPromotResultMap.mallProdVo) ? (this.wsprice = parseFloat(data.allPromotResultMap.mallProdVo.promPrice * 0.5).toFixed(2)) : (this.wsprice = parseFloat(data.wsprice * 0.5 || 0).toFixed(2));
            this.normalprice = parseFloat(data.allPromotResultMap.mallProdVo.price * 0.5 || 0).toFixed(2);
          }
          this.stockCount = data.stockcount ? parseFloat(data.stockcount).toFixed(2) : '0.00';
        } else if (data.goodstype == 6) {
          this.goodsType = 6;
          this.estimate = `约${data.weighingsmall}~${data.weighingbig}kg/${data.mallUnit || ''}`;
          this.goodsunit = data.mallUnit || '';
          this.stockCount = data.stockcount ? Math.floor(data.stockcount / data.weighingbig) : 0;
          (data.allPromotResultMap && data.allPromotResultMap.mallProdVo) ? (this.wsprice = parseFloat(data.allPromotResultMap.mallProdVo.promPrice * data.weighingbig).toFixed(2)) : (this.wsprice = parseFloat(data.wsprice * data.weighingbig || 0).toFixed(2));
          (data.allPromotResultMap && data.allPromotResultMap.mallProdVo) ? (this.perPrice = parseFloat(data.allPromotResultMap.mallProdVo.promPrice * 0.5).toFixed(2)) : (this.perPrice = parseFloat(data.wsprice * 0.5).toFixed(2));
          this.normalprice = parseFloat(data.allPromotResultMap.mallProdVo.price * 0.5 || 0).toFixed(2);
        } else {
          this.goodsunit = data.goodsunit;
          (data.allPromotResultMap && data.allPromotResultMap.mallProdVo) ? (this.wsprice = parseFloat(data.allPromotResultMap.mallProdVo.promPrice).toFixed(2)) : (this.wsprice = parseFloat(data.wsprice || 0).toFixed(2));
          this.normalprice = parseFloat(data.allPromotResultMap.mallProdVo.price || 0).toFixed(2);
          this.stockCount = data.stockcount ? data.stockcount : 0;
        }
        this.mGoodsId = data.goodscode;
        data.serviceInfoList && (this.serviceInfoList = data.serviceInfoList);
        this.prodarea = data.prodarea;
        this.brandname = data.brandname;
        this.goodsUnit = data.goodsunit || '件';
        this.secTitle = data.subtitle;  // 特色描述
        this.traceabilityaddress = data.traceabilityaddress;   //溯源链接
        // 储存条件
        if (data.storageconditions == 0) {
          this.storageConditions = "常温"
        } else if (data.storageconditions == 1) {
          this.storageConditions = "冷冻"
        } else if (data.storageconditions == 2) {
          this.storageConditions = "冷藏"
        } else if (data.storageconditions == 3) {
          this.storageConditions = "热链"
        } else {
          this.storageConditions = "常温"
        }
        this.activitiesBar = data.allPromotResultMap;   // 活动
        this.CouponsList = data.allPromotResultMap.couponList; //优惠券
        data.allPromotResultMap.mallProdVo.promPrice == data.allPromotResultMap.mallProdVo.price ? this.normalDisplay = false : this.normalDisplay = true;
        let flag = false;
        if (urlList.length) {
          urlList.forEach(function (element) {
            element.Imgurltype == 2 ? this.imgurl = element.imgurl.split(" ") : "";
            if (element.Imgurltype == 0) {
              flag = true;
              let Arr = new Array();
              let arr = element.imgurl.split(" ");
              for (let item of arr) {
                let Obj = new Object();
                Obj.publicityPicture = item;
                Arr.push(Obj);
              }
              this.transferUrl = Arr;
            }
          }, this);
        }
        if (!flag) {
          let Arr = new Array();
          let Obj = new Object();
          Obj.publicityPicture = {"publicityPicture": "static/image/demo2.png"};
          Arr.push(Obj);
          this.transferUrl = Arr;
        }
        // ws    VS    normal
        if(localStorage.getItem("sessionId")){
          this.getDeliveryTime(data);
        }
        hideLoading();
        // this.getPromotion(data.goodsid,this.wsprice);
      },
      changeStyle() {
        if (window.innerWidth <= 350) {
          this.serInfo = "serInfo";
        }
      },
      //获取优惠活动
      getPromotion(goodscode, normalprice) {
        let options = {
          method: "get",
          // url: window.api.local_host + "/marketCenter/getPromotionalListByGood/" + api.enterpriseCode + "/" + goodscode,
          url: api.trade_host + "/marketCenter/getPromotionalListByGood/" + api.enterpriseCode + "/" + goodscode + "/" + api.shopCode + "/wap",
          // url: "http://172.19.5.152:33003/marketCenter/getPromotionalListByGood/NJXS/106363",
          headers: {sessionId: localStorage.getItem("sessionId")}
        };
        axios(options).then(data => {
          if (data.data.returnCode != 0) {
            var temp = data.data.data[0];
            this.activitiesBar = temp;
            this.promotionList = [].concat(arr);            //equal to create a new array to change the repository of this variable to make the the following changes won't influent the value of this valiable; damned reference type
          } else {
            // this.wsprice = this.normalprice;
          }
        })
      },
      //获取预计到达时间
      getDeliveryTime(data) {
        let options = {
          method: "get",
          url: api.trade_host + "/delivery_config/first/tm_interval",
          params: {
            deliveryType: data.distributiontype,
            machineTm: data.distributionprocessingtime,
            readyTm: data.distributionpreparationtime,
            storeCode: localStorage.getItem("storeCode")
          },
          headers: {sessionId: localStorage.getItem("sessionId")}
        }
        axios(options).then(data => {
          if (data.data.data[0]) {
            this.deliveryTime = data.data.data[0].deliveryDate;
            this.startBookTm = data.data.data[0].delivery.startBookTm;
            this.endBookTm = data.data.data[0].delivery.endBookTm;
          }
        })
      },

      showCoupon(cartModle) {
        cartModle = "carttCompon"
        this.$refs[cartModle] && this.$refs[cartModle].showModle()
        this.couponListCanBeGet = this.CouponsList
      },
      refreshData() {
        this.getDetail()
      },
    },
    created() {
      var barCode = this.$route.query.barcode;
      this.barCode = barCode || ''
      console.log(this.$route.params)
    }
  }
</script>
<style scoped>
  .interpret span {
    height: 100%;
    line-height: 100%;
  }

  #shade {
    width: 100%;
    height: 100%;
    background: lightgray;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    z-index: 10;
    display: none;
  }

  body {
    width: 100%;
  }

  .grayBar {
    width: 100%;
    height: 15px;
    background: #F5F5F5;
  }

  .price {
    background: white;
    text-align: left;
  }

  .aui-ellipsis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .goodsName {
    font-size: 1rem;
    padding: 0.2rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .goods_detail {
    margin-bottom: 0;
    text-align: center;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  .goods_detail p {
    padding: 0.2rem 0.75rem;
  }

  .second_title {
    width: 100%;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
  }

  p {
    font-size: 0.7rem;
    color: #9a9a9a;
  }

  .njfont {
    font-family: "njfont" !important;
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
  }

  .labels {
    margin-bottom: 0.7rem;
  }

  .right_line {
    border-right: 1px solid #EAEAEA;
    height: 1.6rem;
    position: absolute;
    top: 1.2rem;
    right: 0;
  }

  .purchased {
    height: 3rem;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    position: relative;
    width: 100%;
    left: 0;
    bottom: 0;
    display: block;
    border-top: 1px solid #eaeaea;
    z-index: 99;
  }

  .purchased .add_to_cart {
    height: 1.8rem;
    line-height: 1.8rem;
    margin-top: -0.2rem
  }

  .purchased .server_icon {
    float: left;
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .midPart {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow: hidden
  }

  .shopping_cart {

    position: absolute;
    top: 0;
    left: 0.5rem;
    bottom: 0;

    margin: auto;
    font-size: 1.2rem;
    color: #7c7c7c;
  }

  .coupon {
    font-size: 12px;
    background: #00B762;
    padding: 2px;
    border-radius: .2rem;
    color: white;
  }

  #Coupons {
    width: 100%;
  }

  #Coupons > ul {
    width: 100%;
  }

  #Coupons > ul > li {
    width: 100%;
    padding-left: .7rem;
  }

  /* .explain{ */
  /* position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%); */
  /* } */
  /*add by lanxin 2018-01-06*/

  .image_text_con {
    padding: 0;
  }
</style>
